﻿@using MudBlazor

<div>
    <MudButton OnClick="@ToggleOpen" Variant="Variant.Filled" StartIcon="@SelectedIcon" Color="Color.Primary">Select Icon</MudButton>

    <MudPopover Open="@_isOpen" OverflowBehavior="OverflowBehavior.FlipAlways" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
        <MudPaper Outlined="true" Class="d-flex flex-wrap gap-6 pa-4" Style="width: 412px; max-height: 300px; overflow-y: auto;">
            @foreach (var icon in Icons)
            {
                <MudIcon Icon="@icon" Size="Size.Medium" Class="m-2 cursor-pointer fa-solid"
                         @onclick="() => SelectIcon(icon)"
                         Style="@GetIconStyle(icon)">
                </MudIcon>
            }
        </MudPaper>
    </MudPopover>
</div>

@code 
{
    [Parameter]
    public string SelectedIcon { get; set; } = string.Empty;

    [Parameter]
    public EventCallback<string> SelectedIconChanged { get; set; }

    private bool _isOpen = false;

    private List<string> Icons = new List<string>
    {
        "fa-solid fa-search",
        "fa-solid fa-tachometer-alt",
        "fa-solid fa-user",
        "fa-solid fa-envelope",
        "fa-solid fa-tasks",
        "fa-solid fa-rocket",
        "fa-solid fa-wand-sparkles",
        "fa-solid fa-wand-magic-sparkles",
        "fa-solid fa-circle-plus",
        "fa-solid fa-puzzle-piece",
        "fa-solid fa-calculator",
        "fa-regular fa-calendar",
        "fa-solid fa-magic",
        "fa-solid fa-lightbulb",
        "fa-solid fa-bolt",
        "fa-solid fa-moon",
        "fa-regular fa-moon",
        "fa-solid fa-star",
        "fa-solid fa-user-astronaut",
        "fa-solid fa-shuttle-space",
        "fa-solid fa-meteor",
        "fa-solid fa-brain",
        "fa-solid fa-eye",
        "fa-regular fa-eye",
        "fa-solid fa-terminal",
        "fa-solid fa-check",
        "fa-solid fa-square-check",
        "fa-solid fa-circle-check",
        "fa-solid fa-image",
        "fa-regular fa-image",
        "fa-solid fa-cogs",
        "fa-solid fa-link",
        "fa-solid fa-robot",
        "fa-solid fa-cloud",
        "fa-solid fa-film",
        "fa-solid fa-video",
        "fa-solid fa-headphones",
        "fa-solid fa-video",
        "fa-solid fa-closed-captioning",
        "fa-solid fa-podcast",
        "fa-solid fa-microphone",
        "fa-solid fa-microphone-slash",
        "fa-solid fa-square-rss",
        "fa-solid fa-tv",
        "fa-solid fa-clapperboard",
        "fa-solid fa-circle",
        "fa-solid fa-pen",
        "fa-solid fa-file-alt",
        "fa-solid fa-code",
        "fa-solid fa-language",
        "fa-solid fa-question",
        "fa-solid fa-chart-line",
        "fa-solid fa-database",
        "fa-solid fa-save",
        "fa-solid fa-edit",
        "fa-solid fa-trash",
        "fa-solid fa-play",
        "fa-solid fa-stop",
        "fa-solid fa-sync",
        "fa-solid fa-bell",
        "fa-solid fa-undo",
        "fa-solid fa-share",
        "fa-solid fa-inbox",
        "fa-solid fa-paper-plane",
        "fa-solid fa-at",
        "fa-solid fa-calendar",
        "fa-solid fa-clock",
        "fa-solid fa-sticky-note",
        "fa-solid fa-project-diagram",
        "fa-solid fa-clipboard-list",
        "fa-solid fa-bullseye",
        "fa-solid fa-briefcase",
        "fa-brands fa-github",
        "fa-brands fa-gitlab",
        "fa-brands fa-bitbucket",
        "fa-brands fa-stack-overflow",
        "fa-brands fa-digital-ocean",
        "fa-brands fa-docker",
        "fa-brands fa-aws",
        "fa-brands fa-google-drive",
        "fa-brands fa-google",
        "fa-brands fa-youtube",
        "fa-brands fa-microsoft",
        "fa-brands fa-windows",
        "fa-brands fa-apple",
        "fa-brands fa-wordpress",
        "fa-brands fa-facebook",
        "fa-brands fa-twitter",
        "fa-brands fa-square-x-twitter",
        "fa-brands fa-instagram",
        "fa-brands fa-discord",
        "fa-brands fa-tiktok",
        "fa-brands fa-linkedin",
        "fa-brands fa-stripe",
        "fa-brands fa-paypal",
        "fa-brands fa-vimeo",
        "fa-brands fa-whatsapp",
        "fa-brands fa-shopify",
        "fa-brands fa-telegram",
        "fa-brands fa-square-js",
        "fa-brands fa-java",
        "fa-brands fa-python",
        "fa-brands fa-rust",
        "fa-brands fa-php",
        "fa-brands fa-html5",
        "fa-brands fa-css3-alt",
        "fa-brands fa-linux",
        "fa-brands fa-twitch",
        "fa-brands fa-webflow",
        "fa-brands fa-vuejs",
        "fa-brands fa-trello",
        "fa-brands fa-signal-messenger",
        "fa-brands fa-reddit",
        "fa-brands fa-markdown",
        "fa-brands fa-mailchimp",
        "fa-brands fa-git",
        "fa-brands fa-git-alt",
        "fa-brands fa-evernote",
        "fa-brands fa-digital-ocean",
        "fa-brands fa-btc",
        "fa-brands fa-bitcoin",
        "fa-brands fa-spotify",
        "fa-brands fa-check-square",
    };

    private void SelectIcon(string icon)
    {
        SelectedIcon = icon;
        SelectedIconChanged.InvokeAsync(icon);
        _isOpen = false;
    }

    private void ToggleOpen() => _isOpen = !_isOpen;

    private string GetIconStyle(string icon)
    {
        return icon == SelectedIcon ? "color: var(--mud-palette-primary);" : "";
    }
}
